;(function($){
    var opts = {
        tabs: [
        ['A', 'B', 'C', 'D', 'E'],
        ['F', 'G', 'H', 'J'],
        ['K', 'L', 'M', 'N', 'P'],
        ['Q', 'R', 'S', 'T', 'W'],
        ['X', 'Y', 'Z']
        ]
    }
var hotCitiesus=function(hotCities){
    var $wrapper=$('<div class="wrapper hc"></div>')
    var $hcTitle=$('<h3 class="hcTitle">热门城市：</h3>')
    var $hotCities=$('<div class="hotCities"></div>')
    $.each(hotCities,function(index,city){
        var $cities=$('<span class="cities" code="'+city.code+'">'+city.name+'</span>')
        $hotCities.append($cities)
    })  
    $wrapper.append($hcTitle).append($hotCities)
    return $wrapper;
}
/* */
var tabus=function(tabs){
    var $tabpanel=$('<div class="tabPanel"></div>')
    $.each(tabs,function(index,tab){
        var classname=index===0?"active":''
        var $tab=$('<div class="tab '+classname+'">'+tab.join('')+'</div>')
        $tabpanel.append($tab)
    })
    return $tabpanel;
}
var zus=function(xs){
    var $tabContent=$('<div class="tabContent"></div>')
    $.each(xs,function(index,tab){
        var $content=xus(tab);
        index===0?$content.addClass("active"):null;
        $tabContent.append($content)
        
    })
    return $tabContent
}

var xus=function(xx){
    var $content=$('<div class="content"></div>')
    $.each(xx,function(index,opts){
        var $wrapper=yus(opts)
        $content.append($wrapper)
    })
    
    return $content
}
var yus=function(xx){
    var $wrapper=$('<div class="wrapper"></div>')
    var $letterTitle=$('<h3 class="letterTitle">'+xx+'</h3>')
    var $allCities=$('<div class="allCities"></div>')
    $.each(area.cities[xx],function(index,tab){
        var $cities=('<span class="cities" code="'+tab.code+'">'+tab.name+'</span>')
        $allCities.append($cities)
    })
    $wrapper.append($letterTitle).append($allCities)
    return $wrapper
}
     var addEvent = function (ele) {
    var $content = ele.next().children()
    console.log($content, ele)

    ele.on('mouseover', '.tab', function () {
      // console.log($(this).index())
      $(this).addClass('active').siblings('.active').removeClass('active')
      $content.eq($(this).index()).addClass('active').siblings('.active').removeClass('active')
    })
  } 
    $.fn.area=function(){
        this.append(hotCitiesus(area.hot)).append(tabus(opts.tabs)).append(zus(opts.tabs))
        addEvent($(".tabPanel"))



        return this;
    }
}(jQuery))